// 创建vuex，并导出
// createStore：创建vuex实例对象
// Logger Plugin 安装 createLogger
import { createLogger, createStore } from 'vuex'
// 使用vuex-persistedstate插件来进行持久化
import createPersistedstate from 'vuex-persistedstate'
import user from './modules/user'
import cart from './modules/cart'
import category from './modules/category'
// 测试cookies本地存储 ok!!
// import Cookies from 'js-cookie'

export default createStore({
  state: {
    // 存储数据
  },
  mutations: {
    // 修改数据函数
  },
  actions: {
    // 请求数据函数
  },
  modules: {
    // 分模块
    user,
    cart,
    category
  },
  // 使用vuex-persistedstate插件来进行持久化
  // 配置项plugins
  plugins: [
    // 作用机制：加入持久化缓存的模板中的数据一旦发生变化就会自动存入本地
    // vuex中cart/user中的响应式数据和本地ls永远同步
    // 两个方向 1 数据变化会同步到本地 2 刷新，本地再同步到vuex

    // 拓展
    // 1 默认情况下 会自动同步到localStorage
    // 2 如果想要自定义 只需要提供一个支持 删除 添加 取值 的对象即可
    // storage:{setItem(){cookies.set()},getItem(){cookie.get()},removeItem(){cookies.remove()}}

    // 执行插件
    createPersistedstate({
      // 两个必要参数
      // key 将来vuex中的数据存入本地ls时，使用的key的名称
      // paths 想把哪些模块中的响应式数据进行持久化 就写在里面
      key: 'erabbit-pc',
      paths: ['user', 'cart']
    }),
    // createPersistedstate({
    //   // 测试用用cookies保存到本地 ok！！
    //   key: 'erabbit-pc',
    //   paths: ['user', 'cart'],
    //   storage: {
    //     setItem (key, value) {
    //       Cookies.set(key, value)
    //     },
    //     getItem (key) {
    //       Cookies.get(key)
    //     },
    //     removeItem (key) {
    //       Cookies.remove(key)
    //     }
    //   }
    // }),
    // 每次提交mutation函数都会在浏览器打印区域 打印出本次mutation提交的关键信息
    createLogger()
  ]
})
